 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{$Think.config.site.title} - 管家管理</title>
    <meta name="keywords" content="{$Think.config.site.keywords}">
    <link href="{$Think.config.site.resource_url}css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/animate.min.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/style.min.css?v=4.0.0" rel="stylesheet">
</head>
<style>
ul{margin: 0;padding: 0;}
ul li{list-style: none;}

.clear{clear: both;}

.hbox{ width: 100%; height: 39px; background: #fff; position: fixed; left: 0; top: 0; box-shadow: 0 1px 20px #eee;z-index: 9; padding-top: 5px;}
.hbox ul{}
.hbox ul li{ display: inline-block; padding: 0 18px; height: 40px; line-height: 40px; color: #333}
.hbox ul li.active{border-bottom: solid 2px rgb(13, 190, 8); color: rgb(13, 190, 8)}
.hbox .scroll-box{width: 100%; overflow-x: scroll; overflow-y: hidden; white-space: nowrap;}
.nav-hbox{height: 39px; overflow: hidden;}

.cbox{ width: 100%; position: absolute; left: 0; top: 39px; bottom: 0px; background: #333 }
.cbox-r{position: relative;  width: 100%; height: 100%}

.nav-cbox {background: #EEE; width: 130px; left: 0; top: 0; height: 100%; position: absolute; overflow: hidden;}
.nav-cbox  .scroll-box{overflow-y: auto; overflow-x: hidden; width: 140px; height: 100%;}
.nav-cbox ul{}
.nav-cbox ul li{ padding: 8px 10px; cursor: pointer;}
.nav-cbox ul li.active{background: #fff}
#hbox-scroll-box ul li{cursor: pointer; z-index: 1000}

.goods-cbox{ position: absolute; left: 0px; top: 0px; right: 0px; height: 100%; background: #fff  }

.cbox-nav{width: 100%; position: absolute; top: 0; left: 0; height: 40px; overflow: hidden; border-bottom: 1px solid rgb(13, 190, 8)}
.cbox-nav ul li{ display: inline-block; padding: 0 18px; height: 40px; line-height: 40px; color: #333;cursor: pointer; z-index: 1000}
.cbox-nav ul li.active{color: #fff; background: rgb(13, 190, 8)}
.cbox-nav .scroll-box-nav{width: 100%; overflow-x: scroll; overflow-y: hidden; white-space: nowrap;}

.goods-cbox-c{position: absolute; width: 100%; top: 0px; left: 0; bottom: 0; overflow: hidden;}
.goods-list-box{ width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; padding: 10px 0 10px 0px;}

.list-cate{border-left: 2px solid sandybrown;  padding: 10px; background: #eee;}

.list-goods{border-bottom: 1px solid #eee; overflow: auto; padding: 8px 0 0; margin-left: 10px;}
.goods-info{ margin-bottom: 8px;}
.goods-info .imgbox{width: 40%; float: left;}
.goods-info .imgbox img{width: 100%;}
.goods-info .info{ width: 60%; float: left; padding-left: 10px;}
.goods-info .info button{float: right;}
.mbtn{margin-top: 5px;}
.mbtn button{float: right;}
.addfreqlist{    margin-top: 4px; display: inline-block; color: rgb(13, 190, 8); cursor: pointer;}

.goods-spec-list{align-items:center; border-top: 1px solid #ccc; padding: 8px 0 0; background: rgb(253, 253, 253);display: none;}
.list-goods.active .goods-spec-list{ display:-webkit-box; display:-webkit-flex; display:flex; }

.goods-spec-list .info{-webkit-box-flex:1;-webkit-flex:1;flex:1; padding-left: 8px;}
.bmr{margin-right: 10px;}

#cbox-scroll-box ul{display: none;}
#cbox-scroll-box ul li.active{background: #fff; border:none; color: rgb(13, 190, 8)}

.price{overflow: hidden;}

.btn-primary.active, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open .dropdown-toggle.btn-primary{
	background-color: #0dbe08;
    border-color: #0dbe08;
    color: #FFF;
}
.btn-primary {
    background-color: #0dbe08;
    border-color: #0dbe08;
    color: #FFF;
}

.brand{display: inline-block;
    padding: 0px 5px;
    background: #f1b348;
    border-radius: 5px;
    font-size: 12px;
    color: #fff;}
p.name{display: inline-block;
    margin-left: 10px;
    font-size: 14px;}

a{color: #666}
</style>
<body class="gray-bg">
	<div class="mbody">
		<div class="hbox">
			<div class="col-sm-12">
			<form action="{:url('search',['shop_id'=>$shop_id])}" method="get" enctype="application/x-www-form-urlencoded">
            <div class="input-group">
                <input type="text" placeholder="请输入关键词" class="input-sm form-control" value="{$Think.get.name ?? ''}" name="name">
                <span class="input-group-btn">
                    <button type="submit" class="btn btn-sm btn-primary"> 搜索</button> </span>
            </div>
            </form>
            </div>
		</div>
		<div class="cbox">
			<div class="cbox-r">
				<div class="goods-cbox">

					<div class="goods-cbox-c">
						<div class="goods-list-box">
							{volist name="list" id="v"}
							<!-- <div class="list-cate" id="cate_{$vo.id}" data-id="{$vo.id}">{$vo.title}</div> -->

							<div class="list-goods">
								<div class="goods-info">
									<a href="{:url('Mall/goodsDetail',['shop_id'=>$shop_id,'goods_id'=>$v['goods_id']])}">
									<div class="imgbox">
										<img src="{$v.picture}">
									</div>
									
									{if(sizeof($v['list'])<=1)}

									<div class="info">
										<span class="brand">{$v.brand_name}</span><p class="name">{$v.goods_name}</p>
										<p class="price"><span>{$v.unit_price}</span>/{$v.unit}</p>
									</div>
									</a>
									<div class="clear"></div>
									<div class="mbtn">
										<span class="addfreqlist" data-goods_id="{$v.goods_id}"><i class="fa fa-calendar-plus-o"></i>  加入清单</span>
										<button class="btn btn-primary btn-xs bmr addcart" 
											data-open="false" 
											data-specval_id="{$v['specval_id']}"  
											data-goods_id="{$v['goods_id']}">
											<i class="mloder"><i class="fa fa-refresh mloder_circle"></i></i><span class="by">购买</span>
										</button>
										
									</div>
									<div class="clear"></div>
								</div>	
									{else}
									<div class="info">
										<p class="name">{$v.goods_name}</p>
										<p class="price"><span>{$v.min_price}-{$v.man_price}</span>/{$v.unit}</p>
									</div>
									</a>
									<div class="clear"></div>
									<div class="mbtn">
										<span class="addfreqlist" data-goods_id="{$v.goods_id}"><i class="fa fa-calendar-plus-o"></i>  加入清单</span>

										<button class="btn btn-primary btn-xs bmr xgg" data-open="false">选规格</button>
									</div>

									<div class="clear"></div>
								</div>
									{volist name="$v['list']" id="vv"}
									<div class="goods-spec-list">
										<div class="info">
											<p class="price"><span>{$vv.price}</span>/{$vv.spec_name}({$vv.specval_name})</p>
											<p class="price"><span>{$vv.unit_price}</span>/{$vv.unit}</p>
										</div>
										<button class="btn btn-primary btn-xs bmr addcart"  
											data-specval_id="{$vv['specval_id']}" 
											data-goods_id="{$vv['goods_id']}">
											<i class="mloder"><i class="fa fa-refresh mloder_circle"></i></i><i class="fa fa-plus by"></i>
										</button>
										<div class="clear"></div>
									</div>
									{/volist}
									{/if}
							</div>
							{/volist}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
    <script src="{$Think.config.site.resource_url}js/jquery.min.js?v=2.1.4"></script>
    <script src="{$Think.config.site.resource_url}js/bootstrap.min.js?v=3.3.5"></script>
    <script src="{$Think.config.site.resource_url}js/plugins/layer/layer.js"></script>
    <script src="{$Think.config.site.common_resource_url}js/majax.js"></script>
    <script src="{$Think.config.site.common_resource_url}js/jedit.js"></script>
    {include file='public/footer' /}
</body>
<style type="text/css">
.mloder_circle{
	animation:circle 1s infinite linear;/*匀速 循环*/
	-webkit-animation:circle 1s infinite linear;/*匀速 循环*/
}
	
@-webkit-keyframes circle{
	0%{ transform:rotate(0deg); -webkit-transform:rotate(0deg);}
	100%{ transform:rotate(360deg);  -webkit-transform:rotate(360deg);}
}
.mloder{display: none;}
</style>
</html>
<script>

$('body').delegate('.xgg','click',function(){
	var o = $(this);
	if (o.data('open')) {
		o.closest('.list-goods').removeClass('active');
		o.text('选规格');
		o.data('open',false);
	}else{
		o.closest('.list-goods').addClass('active');
		o.text('收起');
		o.data('open',true);
	}
})

$('body').delegate('.addfreqlist','click',function(){
	var goods_id = $(this).data('goods_id'),o=$(this);
	
	majax('{:url("Freqlist/add_freq",["shop_id"=>$shop_id])}',{goods_id:goods_id},function(d){
		layer.msg(d.msg)
	},{autoload:false,automsg:false})
})

$('body').delegate('.addcart','click',function(){
	var specval_id = $(this).data('specval_id'),goods_id = $(this).data('goods_id'),o=$(this);
	o.find('.by').hide();
	o.find('.mloder').show();
	o.removeClass('btn-primary');
	o.removeClass('addcart');
	majax('{:url("Cart/edit",["shop_id"=>$shop_id])}',{specval_id:specval_id,goods_id:goods_id},function(d){
		o.find('.by').show();
		o.find('.mloder').hide();
		o.addClass('btn-primary');
		o.addClass('addcart');
		if (d.code>0) {
			var cartNum = parseInt($('.cartNum').text());
			if (isNaN(cartNum)) {cartNum=0}
			$('.cartNum').show().text(cartNum+1);
		}else{

		}
	},{autoload:false,automsg:false})
})


</script>